<template>
    <el-sub-menu v-if="item.children" :index="item.url">
        <template #title>
            <el-icon>
                <!-- 动态设置icon图表 -->
                <component :is="item.icon"></component>
            </el-icon>
            <span>{{ item.name }}</span>
        </template>
        <MyMenu v-for="child in item.children" :key="child.url" :item="child"></MyMenu>
    </el-sub-menu>
    <el-menu-item @click="add(item.name,item.icon,item.url)" v-else :index="item.url" v-show="!(item.name=='订单详情')">
        <el-icon>
            <component :is="item.icon"></component>
        </el-icon>
        <span>{{ item.name }}</span>
    </el-menu-item>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import type { PropType } from 'vue'
import type { MenuItem as MenuItemType } from '@/type/user'
import { useTabsStore } from '@/store/tabs';
export default defineComponent({
    name: 'MyMenu',
    props: {
        item: {
            // vue3官网上寻找的类型
            type: Object as PropType<MenuItemType>,
            required: true
        }
    },
    setup(){
        const tabsStore = useTabsStore()
        const {addTab,setActiveTab}  = tabsStore
        const add = (name:string,icon:string,url:string)=>{
           addTab(name,icon,url)
           setActiveTab(name,icon)
        }
        return {add}
    }
})

</script>


<style lang="less" scoped>
.is-active {
    background-color: #227eff;
    color: white;
}

.is-active {
    ::v-deep .el-sub-menu__title {
        background-color: #227eff;
        color: white;
    }

}
.el-menu-item:hover{
    background-color: #227eff;
    color: white;
    transform: scale(1.2);
}
</style>